<template>
	<view>
		<image class="back-image" :src="$img('/static/2021-08-30/5676eb0585ecbd7e2a7ffd198cde3bf.png')"
			mode="widthFix" />
		<image class="back-image back-image-bottom"
			:src="$img('/static/2021-08-30/02e467e26fcb6dfd3e3499b5dfee052.png')" mode="widthFix" />

		<view class="topBg" style="background-image:none"></view>
		<view class="guanzhutuijian">
			<view :class="[curTab == 0 ? 'curguanzhuText' : '', 'guanzhuText']" @c ck="changeTab(0)">登录</view>
			<view class="guanzhuText" @click="changeTab(0)">/</view>
			<view :class="[curTab == 1 ? 'curguanzhuText' : '', 'guanzhuText']" @click="tozhuce">注册</view>
		</view>
		<view class="content" v-if="curTab == 0">
			<view class="name">
				<image class="name-left" src="../../static/pages/shoujihao.png"></image>
				<view class="name-right">
					<input class="name-text" placeholder="请输入您的手机号" type="number" maxlength="11" v-model="phone" />
					<!-- <view class="blank1"></view> -->
				</view>
			</view>
			<view class="name">
				<image class="name-left" src="../../static/pages/mima.png"></image>
				<view class="name-right"><input class="name-text" placeholder="请输入您的密码" password v-model="password" />
				</view>
			</view>

			<!-- <view class="zhuce" @click="tozhuce">去注册</view> -->
			<view class="activeSave" @click="submit"><span class="save-text">登录</span></view>
		</view>
		<view class="content" v-else>
			<view class="name">
				<image class="name-left" src="../../static/pages/shoujihao.png"></image>
				<view class="name-right">
					<input class="name-text" placeholder="请输入您的手机号" type="number" maxlength="11" v-model="phone" />
					<!-- <view class="blank1"></view> -->
				</view>
			</view>
			<view class="name">
				<image class="name-left" src="../../static/pages/mima.png"></image>
				<view class="name-right">
					<input class="name-text" placeholder="请输入您的密码" password v-model="password" />
					<view class="blank1"></view>
				</view>
			</view>
			<view class="name">
				<image class="name-left" src="../../static/pages/mima.png"></image>
				<view class="name-right">
					<input class="name-text" placeholder="请输入您的密码" password v-model="password" />
					<view class="blank1"></view>
				</view>
			</view>
			<view class="activeSave" @click="zhuce"><span class="save-text">注册</span></view>
		</view>
		<view class="yinsi">
			登录即代表您已阅读并同意
			<text @click="yinsi" class="yinsizc">隐私政策{{wxLoginState}}</text>
		</view>
		<view class="three" v-if="wxLoginState == 1 ">
			<text>社交账号登录</text>
			<image src="/static/newimg/icon_01.png" mode="widthFix" class="icon" @click="wxLogin"></image>
		</view>
		<!-- <view :class="[phone&&password?'activeSave':'','save']" @click='submit'><span class="save-text">登录</span></view> -->
		<!-- <view class="buttomBg"></view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	// import COS from "cos-js-sdk-v5";
	export default {
		data() {
			return {
				// password: '123456',
				phone: '18982828605',
				
				password: '123456',
				// phone: '15984817250',
				
				// phone: '15882277019',
				curTab: 0,
				imgUrl: '../../static/pages/photo.png',
				name: '',
				avatar: [],
				array: [
					'请选择',
					'15',
					'16',
					'17',
					'18',
					'19',
					'20',
					'21',
					'22',
					'23',
					'24',
					'25',
					'26',
					'27',
					'28',
					'29',
					'30',
					'31',
					'32',
					'33',
					'34',
					'35',
					'36',
					'37',
					'38',
					'39',
					'40'
				],
				index: 0,
				curSex: 1, //1男  2 女
				wxLoginState: 2
			};
		},
		onLoad() {

			let loginInfo = uni.getStorageSync("count")

			if (loginInfo) {
				loginInfo = JSON.parse(loginInfo)
				let phone = loginInfo.mobile
				let password = loginInfo.password
				setTimeout(() => {
					this.submit2(phone, password)
				})
			}
			this.getWxLoginState()
		},
		methods: {
			getWxLoginState() {
				this.$utils.request('/api/config/switch', {
					id: 1
				}, res => {
					if (res.code == 200) {
						this.wxLoginState = res.data.config_status;
						uni.setStorageSync('wxLoginState', res.data.config_status);
					}
				})
			},
			changeTab(num) {
				this.list = [];
				this.curTab = num;
				this.page = 1;
			},
			tozhuce() {
				uni.navigateTo({
					url: '/pages/login/register'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: '/pages/login/policy'
				});
			},
			submit() {
				let that = this;
				/* uni.switchTab({
						url:'/pages/index/index'
					})
					return */
				if (that.phone == '') {
					that.$utils.showLayer('请填写手机号');
					return;
				}
				if (that.password == '') {
					that.$utils.showLayer('请填写密码');
					return;
				}
				let paramData = {
					mobile: that.phone,
					password: that.password
				};
				this.$utils.postrequest('/api/login', paramData, function(res) {
					if (res.code == 200) {
						uni.setStorageSync('count', JSON.stringify(paramData));
						that.getUserSig(res.data.id);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('avatar', res.data.avatar);
						uni.setStorageSync('nickname', res.data.nickname);
						uni.setStorageSync('userId', res.data.id);
						uni.setStorageSync('sex', res.data.sex);
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
						that.$checkIsVip().then(res => {
							uni.setStorageSync('vipInfo', res)
						})
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
						that.checkPhone() //检测是否绑定手机号
						// uni.reLaunch({
						// 	url:'/pages/guide/guide'
						// })
					} else if (res.code) {
						that.$utils.showLayer(res.message);
					}
				});
			},
			submit2(phone, pwd) {
				let that = this;
				let paramData = {
					mobile: phone,
					password: pwd
				};
				this.$utils.postrequest('/api/login', paramData, function(res) {
					if (res.code == 200) {
						uni.setStorageSync('count', JSON.stringify(paramData));
						that.getUserSig(res.data.id);
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('avatar', res.data.avatar);
						uni.setStorageSync('nickname', res.data.nickname);
						uni.setStorageSync('userId', res.data.id);
						uni.setStorageSync('sex', res.data.sex);
						uni.setStorageSync('userInfo', JSON.stringify(res.data));
						that.$checkIsVip().then(res => {
							uni.setStorageSync('vipInfo', res)
						})
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
						that.checkPhone() //检测是否绑定手机号
						// uni.reLaunch({
						// 	url:'/pages/guide/guide'
						// })
					} else if (res.code) {
						that.$utils.showLayer(res.message);
					}
				});
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value);
				this.index = e.target.value;
			},
			getUserSig(userId) {
				let that = this;
				this.$utils.postrequest('/api/timuser/index?userid=' + userId, {
					userid: userId
				}, function(res) {
					if (res.code == 200) {
						// console.log("用户ID:" + userId);
						//根据返回的userID 以及 userSig 登录tim
						let promise = that.tim.login({
							userID: userId.toString(),
							userSig: res.data
						});
						promise
							.then(resData => {
								//登录成功后 更新登录状态
								that.$store.commit('toggleIsLogin', true);
								//自己平台的用户基础信息
								//tim 返回的用户信息
								uni.setStorageSync('userTIMInfo', JSON.stringify(resData.data));
								// console.log("登录成功！！！！");
							})
							.catch(err => {
								console.warn('login error:', err); // 登录失败的相关信息
							});

					} else {
						that.$utils.showLayer(res.message);
					}
				});
			},
			image() {
				let that = this;
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.$utils.domain + '/api/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: res => {
								if (res.statusCode == 200) {
									that.avatar = [];
									let ress = JSON.parse(res.data);
									if (ress.code == 200) {
										that.imgUrl = ress.data;
										that.avatar.push(ress.data);
										// console.log('res', ress.data);
									}
								}
							}
						});
					}
				});
			},
			zhuce() {
				let that = this;
				if (that.avatar.length == 0) {
					that.$utils.showLayer('请选择头像');
					return;
				}
				if (that.phone == '') {
					that.$utils.showLayer('请填写手机号');
					return;
				}
				if (that.phone == '') {
					that.$utils.showLayer('请填写手机号');
					return;
				}
				if (that.phone.length < 11) {
					that.$utils.showLayer('请填写正确手机号');
					return;
				}
				if (that.password == '') {
					that.$utils.showLayer('请填写密码');
					return;
				}
				if (that.name == '') {
					that.$utils.showLayer('请填写昵称');
					return;
				}
				if (that.index == 0) {
					that.$utils.showLayer('请选择年龄');
					return;
				}
				let paramData = {
					mobile: that.phone,
					password: that.password,
					nickname: that.name,
					nickname: that.name,
					sex: that.curSex + '',
					avatar: JSON.stringify(that.avatar),
					age: that.array[that.index]
				};
				this.$utils.postrequest('/api/register', paramData, function(res) {
					if (res.code == 200) {
						that.$utils.showLayer('注册成功，去登录');
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 800);
					}
				});
			},
			// 微信登录
			wxLogin() {
				uni.showLoading();
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let wxData = loginRes.authResult;
						// // console.log(loginRes.authResult);
						uni.setStorageSync('openid', wxData.openid);
						uni.setStorageSync('access_token', wxData.access_token);
						let data = {
							openid: wxData.openid,
							access_token: wxData.access_token,
						}
						// console.log(data);
						_this.$utils.request('/api/wx_login_openid', data, function(res) {
							uni.hideLoading();
							// console.log(res);
							if (res.code == 200) {
								_this.getUserSig(res.data.id);
								uni.setStorageSync('token', res.data.token);
								uni.setStorageSync('avatar', res.data.avatar);
								uni.setStorageSync('nickname', res.data.nickname);
								uni.setStorageSync('userId', res.data.id);
								uni.setStorageSync('sex', res.data.sex);
								uni.setStorageSync('userInfo', JSON.stringify(res.data));
								_this.$checkIsVip().then(res => {
									uni.setStorageSync('vipInfo', res)
								})
								// uni.switchTab({
								// 	url: '/pages/index/index'
								// });
								_this.checkPhone() //检测是否绑定手机号
								// uni.reLaunch({
								// 	url:'/pages/guide/guide'
								// })
							} else {
								_this.$utils.showLayer(res.message);
							}
						});
					}
				});
			},
			// 检测是否绑定手机号
			checkPhone() {
				let _this = this;
				_this.$utils.request('/api/is_mobile', '', function(res) {
					// console.log(res);
					if (res.code == 200) {
						if (res.data == 0) {
							uni.reLaunch({
								url: '/pages/login/bindphone'
							})
						} else {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					} else {
						_this.$utils.showLayer(res.message);
					}
				});
			}
		}
	};
</script>

<style scoped>
	page {
		position: relative;
		height: 100vh;
		width: 100%;
		overflow: hidden;
	}

	.topBg {
		background-image: url(../../static/topBg.png);
		height: 334rpx;
		width: 100%;
		background-size: cover;
	}

	.buttomBg {
		position: absolute;
		bottom: 0;
		background-image: url(../../static/buttomBg.png);
		height: 300rpx;
		width: 100%;
		background-size: cover;
		background-position: bottom;
		z-index: 1;
	}

	.zhuce {
		/* width:100%; */
		text-align: right !important;
		/* color: #007AFF !important; */
		font-size: 26rpx;
		margin: 30rpx 70rpx;
	}

	.top {
		width: 100%;
		height: 90rpx;
		background: black;
	}

	.content {
		padding: 127rpx 0rpx 0rpx 45rpx;
		z-index: 10;
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.data {
		font-size: 40rpx;
		font-family: PingFang SC;

		color: #2b2937;
		line-height: 27rpx;
	}

	.remark {
		width: 550rpx;
		padding: 46rpx;
		box-sizing: border-box;
		font-size: 23rpx;
		font-family: PingFang SC;

		color: #5d5d5d;
		line-height: 27rpx;
	}

	.back-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.back-image-bottom {
		top: auto;
		bottom: 0;
	}

	.img {
		width: 135rpx;
		height: 135rpx;
		margin: 80rpx 0rpx 0rpx 220rpx;
	}

	.img-text {
		margin: 20rpx 0rpx 0rpx 110rpx;

		font-size: 23rpx;
		font-family: PingFang SC;

		color: #5d5d5d;
		line-height: 27rpx;
	}

	.sex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 35rpx;
	}

	.sex-all {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;

		color: #1a1a1a;
		line-height: 27rpx;
	}

	.classify {
		display: flex;
		flex-wrap: wrap;
		width: 415rpx;
		height: 82rpx;
		background: #f6f7f9;
		border-radius: 38rpx;
		margin-left: 30rpx;
	}

	.sexAll {
		display: flex;
		flex-wrap: wrap;
		margin: 25rpx 0rpx 0rpx 60rpx;
	}

	.nan {
		width: 30rpx;
		height: 30rpx;
	}

	.classify-text {
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #c5c6cb;
		line-height: 27rpx;
		margin-left: 10rpx;
	}

	.blank {
		width: 2rpx;
		height: 60rpx;
		background: #c5c6cb;
		margin: 10rpx 0rpx 0rpx 70rpx;
	}

	.name {
		margin-top: 60rpx;
		display: flex;
		flex-wrap: wrap;
		width: 635rpx;
		height: 85rpx;
		border: 1rpx solid #F5F5F8;
		border-radius: 17rpx;
	}

	.name-left {
		width: 27rpx;
		height: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;

		color: #1a1a1a;
		line-height: 27rpx;
		padding: 28rpx 0rpx 0rpx 37rpx;
	}

	.name-right {
		/* margin-left: 21rpx;
  padding-top: 25rpx; */
	}

	.name-text {
		/* margin: 0rpx 0rpx 25rpx 17rpx; */
		font-size: 23rpx;
		font-family: PingFang SC;

		color: #1A1A1A;
		height: 85rpx;
		line-height: 85rpx;
		margin-left: 17rpx;
	}

	.blank1 {
		width: 397rpx;
		height: 2rpx;
		background: #eeeeee;
	}

	.age-text {
		font-size: 25rpx;
		font-family: PingFang SC;

		color: #d1cfdd;
		line-height: 27rpx;
	}

	.activeSave {
		line-height: 104rpx;
		color: #fff;
		text-align: center;
		background: linear-gradient(90deg, #694cff, #755aff);
		margin-top: 130rpx;
		width: 665rpx;
		height: 104rpx;
		border-radius: 56px;
	}

	.hint {
		margin-top: 40rpx;
		font-size: 23rpx;
		font-family: PingFang SC;

		color: #ff0844;
		line-height: 27rpx;
	}

	.save {
		/* margin-top: 130rpx; */
		margin: 130rpx auto 0;
		width: 544rpx;
		height: 104rpx;
		background: #d1cfdd;
		box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 52rpx;
	}

	/* 	.save-text{
		margin: 37rpx auto;
		text-align: center;
		justify-content: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 27rpx;
		position: absolute;
	} */
	.guanzhutuijian {
		position: absolute;
		top: 200rpx;
		margin-left: 45rpx;
		width: 100%;
		display: flex;
	}

	.guanzhuText {
		/* margin-right: 35rpx; */
		font-size: 48rpx;

		color: #282633;
	}

	.curguanzhuText {
		font-size: 50rpx;
		font-weight: 900;
		font-family: PingFang SC;
	}

	.yinsi {
		margin-top: 68rpx;
		font-size: 25rpx;
		font-family: PingFang SC;

		color: #adaeb3;
		line-height: 25rpx;
		text-align: center;
	}

	.yinsizc {
		color: #6ac7fc;
		padding-left: 10rpx;
	}

	.uni-input-input {
		color: #000 !important;
	}

	.three {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		font-family: PingFang SC;

		color: #9AACBD;
		margin-top: 70px;
		position: relative;
		z-index: 2;
	}

	.three text {
		margin: 0 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.three .icon {
		width: 106rpx;
		margin-top: 34rpx;
	}

	.three text::after,
	.three text::before {
		content: '';
		display: block;
		width: 168rpx;
		height: 1px;
		background: #D8E2EC;
	}

	.activeSave {
		line-height: 104rpx;
		color: #fff;
		text-align: center;
		background: linear-gradient(90deg, #6ac7fc, #52b8fa);
		margin-top: 130rpx;
		width: 665rpx;
		height: 104rpx;
		border-radius: 56px;
	}
</style>
